<template>
  <div id="container"></div>
</template>

<script lang="ts">
  import { Graph } from '@antv/x6';
  import { onMounted, ref } from 'vue';

  export default {
    name: 'Index0601',
    setup() {
      let graph: Graph;
      const padding = ref(20);
      function onPaddingChanged(val: any) {
        padding.value = val;
      }
      onMounted(() => {
        graph = new Graph({
          container: document.getElementById('container') as HTMLElement,
          height: 600,
          background: {
            color: '#fffbe6', // 设置画布背景颜色
          },
          grid: {
            size: 10, // 网格大小 10px
            visible: true, // 渲染网格背景
          },
        });
        graph.addNode({
          x: 60,
          y: 60,
          width: 160,
          height: 80,
          label: 'Rect With Ports',
          ports: [
            { id: 'port1' },
            {
              // 唯一标识
              id: 'port2',
              attrs: {
                circle: {
                  // 圆的半径
                  r: 6,
                  // 吸附功能
                  magnet: true,
                  // 边的颜色
                  stroke: '#31d0c6',
                  // 边的宽度
                  strokeWidth: 2,
                  // 链接桩填充颜色
                  fill: '#fff',
                },
                text: {
                  // 标签选择器
                  text: 'port2', // 标签文本
                },
              },
            },
          ],
        });
      });

      return {
        padding,
        onPaddingChanged,
      };
    },
  };
</script>

<style scoped></style>
